<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>07.v-bind设置元素的属性(比如 src,class,title)</title>
		<style type="text/css">
			.bk {
				border: 1px solid black;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<h1 v-bind:style="ww" :class="bol?'bk':' '" @click="q1">v-bind:属性名=表达式 设置元素的属性(比如 src,class,title)</h1>
			<br />
			<!-- :class="{bk:bol}" 判断bol是否是true 是 class="bk" 不是就为null -->
			<h1 :style="ww" :class="{bk:bol}" @click="q1">: 是 v-bind: 的简写</h1>
		</div>
		<script src="./vue-v2.7.13.js"></script>

		<script>
			//v-bind:属性名=表达式
			//设置元素的属性(比如 src,class,title)
			var app = new Vue({
				el: "#app", //Id #id class .name  标签 div
				//输出的数据
				data: {
					ww: "color:red",
					bol: true
				},
				//对象 方法
				methods: {
					q1: function() {
						this.bol = !this.bol
						console.log(this.bol)
					}
				}
			})
		</script>

	</body>

</html>
